body {
	font-family: PingFang SC, Lantinghei SC, Helvetica Neue, Helvetica, Arial, Microsoft YaHei, "微软雅黑", STHeitiSC-Light, simsun, "宋体", WenQuanYi Zen Hei, WenQuanYi Micro Hei, "sans-serif";
	font-size: 16px;
	font-weight: normal;
	line-height: 1.5;
	background: #f1f2f9;
	color: #666;
	text-transform: none;
}

.header {
	height: 48px;
	line-height: 48px;
	text-align: center;
	font-size: 18px;
	font-weight: bolder;
	background: #0a8;
	color: #fff;
	letter-spacing: 1;
}

.container {
	display: flex;
	position: absolute;
	top: 48px;
	left: 0;
	right: 0;
	bottom: 0;
}

.container .components {
	width: 270px;
	top: 5px;
	left: 0;
	bottom: 0;
	position: absolute;
	overflow: auto;
}

.container .components .li {
	margin-bottom: 5px;
	background: #fff;
}

.container .components .li .head {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #eeee;
	text-align: left;
	text-indent: 10px;
	background: #fafafa;
	margin-bottom: 15px;
}

.container .components .li .ul {
	list-style: none;
}

.container .components .li .ul>li {
	width: 48%;
	float: left;
	padding: 5px 10px;
	border: 1px solid #eee;
	border-radius: 4px;
	margin: 2px;
}

.container .components .li .ul>li a {
	color: #666;
	text-decoration: none;
	cursor: pointer;
}

.container .components .li .ul>li:hover {
	border: 1px solid #0a8;
	color: #0a8;
	cursor: pointer;
}

.container .components .li .clear {
	clear: both;
	padding-bottom: 15px;
}

.container .editor {
	top: 0;
	left: 270px;
	right: 270px;
	position: absolute;
	bottom: 50px;
	height: 100%;
}

.container .editor .toolbar {
	background: #fff;
	margin: 5px;
	height: 4%;
}

.container .editor .foot {
	text-align: center;
	color: #888;
	height: 3%;
}

.container .editor .designer {
	height: 90%;
	margin: 0 5px 5px 5px;
	background: #fafafa;
	overflow: auto;
	border: 1px solid #f1f2f9;
}

.container .editor .designer .layers {
	/*容器层*/
}

.container .editor .designer .inputs {
	/*控件*/
}

.container .attribute {
	width: 270px;
	top: 5px;
	bottom: 0;
	position: absolute;
	right: 0;
	background: #fff;
}

.container .attribute .tabs {
	position: relative;
	height: auto;
}

.container .attribute .tab-pane {
	display: inline-block;
	width: 49%;
	text-align: center;
}

.container .attribute .tabs input[type='radio'] {
	position: absolute;
	clip: rect(0, 0, 0, 0)
}

.container .attribute .tab-item {
	display: block;
	position: relative;
	height: 35px;
	line-height: 35px;
	cursor: pointer;
	padding: 0 10px;
}

.container .attribute .tab-item:after {
	position: absolute;
	content: '';
	height: 2px;
	width: 100%;
	background: #0a8;
	left: 0;
	bottom: -5px;
	transition: .3s;
	transform: scaleX(0)
}

.container .attribute .tab-item:hover {
	color: #0a8;
}

.container .attribute .tabs input[type='radio']:checked+.tab-item:after {
	transform: scaleX(1);
}

.container .attribute .tab-content {
	background: #fff;
	padding: 10px;
	left: 0;
	top: 40px;
	bottom: 0;
	right: 0;
	transition: .3s;
	opacity: 0;
	transform: translateY(50px);
	position: absolute;
	border-top: 1px solid #eee;
}

.container .attribute .tabs input[type='radio']:checked+.tab-item+.tab-content {
	z-index: 1;
	opacity: 1;
	transform: translateY(0)
}